import 'package:black_movice/api/api.dart';
import 'package:black_movice/config/configs.dart';
import 'package:black_movice/mock/movice_details.dart';
import 'package:black_movice/models/FormModel.dart';
import 'package:black_movice/models/MoviceDetailsModel.dart';
import 'package:black_movice/net/http_client.dart';
import 'package:black_movice/utils/Utils.dart';
import 'package:black_movice/views/components/movieReview/movie_review.dart';
import 'package:black_movice/views/components/videoPlayer/video_player.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class Details extends StatefulWidget {
  const Details({super.key});
  @override
  State<Details> createState() => _DetailsState();
}

class _DetailsState extends State<Details> {
  // 表单
  late FormModel formModel = FormModel();
  final Api _api = Api.instance;
  late bool _loading = true;
  MoviceDetailsModel _detailsModel = MoviceDetailsModel();
  // 当前集数
  int _current = 1;
  @override
  void initState() {
    super.initState();
    final HttpClient httpClient = HttpClient.getInstance;
    setupMoviceDetailsMock(httpClient);
    setState(() {
      formModel.movcieId = Get.arguments['moviceId'];
    });
    postMoviceDetails();
  }

  void postMoviceDetails() async {
    setState(() {
      _loading = true;
    });
    _detailsModel = await _api.postMoviceDetails(formModel);
    Utils.logDebug(_detailsModel);
    setState(() {
      _loading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 屏幕高度
    double barHeight = MediaQuery.of(context).size.height * 0.3;
    // 获取顶部安全区的高度
    double topSafeAreaHeight = MediaQuery.of(context).padding.top;
    return Column(
      children: [
        Container(
          alignment: Alignment.center,
          padding: EdgeInsets.only(top: topSafeAreaHeight),
          decoration: BoxDecoration(
            color: Colors.black,
          ),
          height: barHeight,
          width: double.infinity,
          child: VideoPlayer(
              videoUrl:
                  "https://play.modujx10.com/20240320/Na8DaAap/index.m3u8"),
        ),
        Expanded(
          child: SingleChildScrollView(
            child: _loading
                ? Container(
                    constraints: BoxConstraints(
                      minHeight: 400.h,
                    ),
                    alignment: Alignment.center,
                    child: CircularProgressIndicator(),
                  )
                : Padding(
                    padding: EdgeInsets.all(5.sp),
                    child: Column(
                      children: [
                        // 电影名称
                        Container(
                          padding: EdgeInsets.symmetric(
                              horizontal: 0, vertical: 5.sp),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            "${_detailsModel.name}",
                            style: TextStyle(fontSize: Configs.lgTitleSize_16),
                          ),
                        ),
                        // 演员
                        Row(
                          children: [
                            Text(
                              "${_detailsModel.rating}分   ",
                              style: TextStyle(
                                  color: Colors.lightBlueAccent,
                                  fontSize: Configs.titleSize_14),
                            ),
                            Text(
                              "${_detailsModel.productionLocation}   ",
                              style: TextStyle(
                                  color: Colors.lightBlueAccent,
                                  fontSize: Configs.titleSize_14),
                            ),
                            ..._detailsModel.categories!.map(
                              (toElement) => Text(
                                "$toElement  ",
                                style: TextStyle(fontSize: Configs.textSize_12),
                              ),
                            ),
                          ],
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(
                              horizontal: 0, vertical: 10.sp),
                          child: Text(
                            "简介：${_detailsModel.plotSummary}",
                            style: TextStyle(fontSize: Configs.textSize_12),
                            maxLines: 5, // 设置最大行数为 5
                            overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
                          ),
                        ),
                        // 评论部分。收藏，帮助，下载，分享
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            TextButton.icon(
                              style: ButtonStyle(
                                iconColor: WidgetStatePropertyAll(Colors.black),
                                foregroundColor:
                                    WidgetStatePropertyAll(Colors.black),
                              ),
                              onPressed: () {},
                              label: Text("评论"),
                              icon: Icon(Icons.message),
                            ),
                            Row(
                              children: [
                                IconButton(
                                  onPressed: () => {},
                                  icon: Icon(Icons.grade),
                                ),
                                IconButton(
                                  onPressed: () => {},
                                  icon: Icon(Icons.help),
                                ),
                                IconButton(
                                  onPressed: () => {},
                                  icon: Icon(Icons.arrow_circle_down),
                                ),
                                IconButton(
                                  onPressed: () => {},
                                  icon: Icon(Icons.share),
                                ),
                              ],
                            ),
                          ],
                        ),
                        // 选集
                        Container(
                          padding: EdgeInsets.symmetric(
                              horizontal: 0, vertical: 5.sp),
                          alignment: Alignment.centerLeft,
                          child: Text("选集"),
                        ),
                        // 集数列表
                        Container(
                          alignment: Alignment.centerLeft,
                          child: SingleChildScrollView(
                            scrollDirection: Axis.horizontal,
                            child: Row(
                              children: [
                                ...List.generate(
                                    _detailsModel.episodeCount ?? 0,
                                    (index) => index + 1).map(
                                  (item) {
                                    return Padding(
                                      padding: EdgeInsets.only(right: 10.sp),
                                      child: InkWell(
                                        onTap: () {
                                          setState(() {
                                            _current = item;
                                          });
                                          Utils.logDebug("你点击了$item");
                                        },
                                        splashColor:
                                            Colors.blue.withValues(alpha: .5),
                                        borderRadius:
                                            BorderRadius.circular(5.w),
                                        child: Container(
                                          alignment: Alignment.center,
                                          constraints: BoxConstraints(
                                              minWidth: 40.w, minHeight: 40.w),
                                          decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(8.h),
                                            color: Colors.grey[300],
                                            border: Border.all(
                                              color: _current == item
                                                  ? Colors.lightBlue
                                                  : Colors.transparent,
                                              width: 2,
                                            ),
                                          ),
                                          child: Text(
                                            '$item',
                                          ),
                                        ),
                                      ),
                                    );
                                  },
                                ),
                              ],
                            ),
                          ),
                        ),
                        MovieReview(
                          moviceId: formModel.movcieId!,
                        ),
                      ],
                    ),
                  ),
          ),
        ),
      ],
    );
  }
}
